<template>
	<view class="profit-wrap page-bg">
	
		<scroll-view class="scroll-menu" scroll-x="true">
			<view v-for="item in navs" :key='item.id' 
			:class="currentNavId===item.id?'menu-item menu-item-active':'menu-item'"
			@click="serCurrentNavId(item.id)"
			>
				{{item.title}}
				<text class="after-line"></text>
			</view>
		</scroll-view>
		
		<view v-if="items.length <= 0" class="none-wrap">
			<none  :img='icon_none' text='暂时还没有团队成员哦!'></none>
		</view>
		
		<view v-else class="mine-list">
			<view class="mine-item" v-for="item in items" :key='item.id' @click="link('/pages/mine/teamMember?id='+item.id)">
				<image class="mine-item__avatar" :src="item.avatar | avatar" mode=""></image>
				<view class="mine-item__info">
					<view class="mine-item__title text-overflow">{{item.nickName}} 
						<text class="one" v-if="item.explain === '一级成员'">一级成员</text>
						<text class="one two" v-if="item.explain === '二级成员'">二级成员</text>
					</view>
					<view class="mine-item__time desc">{{item.creationTime | formatTime}}</view>
				</view>
				<view class="mine-item__profit link">{{item.total}}个成员</view>
			</view>
			
			<!-- <view class="mine-item">
				<image class="mine-item__avatar" src="../../static/common/icon_27.png" mode=""></image>
				<view class="mine-item__info">
					<view class="mine-item__title">张卫健 开通店铺 <text class="one two">二级成员</text></view>
					<view class="mine-item__time">2012</view>
				</view>
				<view class="mine-item__profit link">10个成员</view>
			</view> -->
		</view>
		
		<view class="page-submit" @click="link('/pages/share/share')">+ 邀请好友</view>
		
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import icon_none from '../../static/common/icon_none_04.png'
	import none from '../../components/none.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return{
				icon_none,
				navs: [],
				items: [],	
				currentNavId: 0,
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0
			}
		},
		onLoad() {
			this.navs = common.gradeType
			this.pageSize = common.pageSize
			this.getItems()
		},
		methods:{
			getItems() {
				let { pageIndex, pageSize, currentNavId} = this.$data
				api.userTeamPages({ pageIndex, pageSize, gradeType: currentNavId},(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 this.items = [...this.items, ...res.items]
				}) 
			},
			serCurrentNavId(id) {
				this.currentNavId = id
				this.pageIndex = 1
				this.items = []
				this.getItems()
			},
			onReachBottom() {
				if(this.pageIndex * this.pageSize >= this.totalCount) {
					this.text = '已经没有更多了~'
				}else{
					this.pageIndex ++
					this.getItems()
				}
			},
			link(url) {
				this.$link(url)
			}
		},
		components:{
			none
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.profit-wrap{
		.content-20;
		display: flex;
		    flex-direction: column;
		    justify-content: flex-start;
	}
	.mine-list{
		margin-top: 20rpx;
	}
	.scroll-menu{
		background-color: @f;
		.br;
		.menu-item{
			width: 33.33%;
		}
	}
	
	.none-wrap{
		position: relative;
		    flex-grow: 2;
		    margin-top: 20rpx;
			.flex-base;
			justify-content: center;
		.none{
			position: unset;
		}
	}
	
	.mine-list{
		.mine-item{
			background-color: @f;
			.br;
			.content-20;
			margin-bottom: 20rpx;
			.flex-base;
		}
		.mine-item__avatar{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}
		.mine-item__info{
			padding: 0 20rpx;
			box-sizing: border-box;
			flex-grow: 2;
		}
		.mine-item__title{
			.f30;
			.one{
				background: @theme-color;
				text-align: center;
				line-height: 30rpx;
				color: @f;
				font-size: 24rpx;
				border-radius: 10rpx 0 10rpx 0;
				padding: 0 10rpx;
				margin-left: 10rpx;
			}
			.two{
				background-color: @font-orange-color;
			}
		}
		.mine-item__time{
			.f24;
			color: @font-dark-color;
			margin-top: 10rpx;
		}
		.mine-item__profit{
			.f28;
			width: 150rpx;
			.text-overflow;
			text-align: right;
			
		}
		.link{
			    justify-content: flex-end;
		}
	}
</style>
